body, div, span, a, img, p, ul, ol, li, input
  margin 0
  padding 0
  box-sizing border-box
  transition color 0.2s, background 0.6s

@font-face
  font-family 'Source Han Sans CN'
  src url('https://cdn.jsdelivr.net/gh/jinyaoMa/my-hexo-site/asset/font/SourceHanSansCN.otf')
  // src url('/asset/font/SourceHanSansCN.otf')

body
  font-family 'Source Han Sans CN', Arial, Helvetica, sans-serif
  font-size $font_size
  line-height 2
  color var(--color-text)
  background var(--color-body-back)
  background-repeat no-repeat
  background-size cover
  background-attachment fixed
  overflow-x hidden
  overflow-y scroll

a
  text-decoration none
  color var(--color-link)

.m-evanyou-canvas
  position fixed
  top s('calc(3em + %s)', $progress_height)
  left 0
  z-index -1
  width 100%
  height s('calc(100% - 3em - %s)', $progress_height)
  pointer-events none
  background-color var(--color-background)
  visibility hidden

.m-launch
  user-select none
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background-color var(--color-link)
  background-image url('https://cdn.jsdelivr.net/gh/jinyaoMa/my-hexo-site/asset/img/cover.background.png')
  // background-image url('/asset/img/cover.background.png')
  background-repeat no-repeat
  background-size 50vmin
  background-position center
  transition opacity 0.3s
  z-index zIndex(0)
  &.disabled
    pointer-events none
    opacity 0

.m-spinner
  user-select none
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background var(--color-spinner-back)
  opacity 0
  pointer-events none
  z-index zIndex(2)
  @keyframes spinner-running
    from
      transform rotate(0deg)
    to
      transform rotate(360deg)
  .m-spinner-ring
    width $gap * 6
    height $gap * 6
    border $gap solid var(--color-spinner-front)
    border-top $gap solid transparent
    position fixed
    top s('calc(50% - %s)', $gap * 3)
    left s('calc(50% - %s)', $gap * 3)
    border-radius 50%
  &.active
    pointer-events all
    transition opacity 0.2s
    opacity 1
    .m-spinner-ring
      animation spinner-running 1s infinite linear

.m-progress
  position fixed
  top 0
  left 0
  user-select none
  height $progress_height
  width 100%
  background var(--color-progress-back)
  z-index zIndex(1)

.m-progress-current
  height 100%
  width 0 // 50%
  background var(--color-progress-front)
  transition width 0.2s

.m-app
  padding-top $progress_height
  max-width $app_width
  margin 0 auto
  // background forestgreen

@media (min-width $app_mobile_width_min)
  .m-app-inner
    padding 0 3em

.m-header
  position fixed
  left 0
  width 100%
  height 3em
  line-height 3
  overflow hidden
  border-bottom 1px solid var(--color-clear)
  color var(--color-header-text)
  background var(--color-header-background)
  z-index zIndex(4)
  &.shadow
    box-shadow 0 0 $gap * 0.5 $gap * 0.25 var(--color-body-back)

.m-center
  width 100%
  padding-top 3em

.m-drawer
  float left
  width $drawer_width
  white-space nowrap
  text-overflow ellipsis
  overflow-x hidden
  // background lightgreen
  @media (min-width $app_mobile_width_min)
    transition all 0.6s
    &.sticky
      float none
      position fixed
      bottom 0
  @media (min-width $app_mobile_width_min)
    position fixed
    bottom 0
    height s('calc(100vh - 3em - %s)', $progress_height)
    overflow hidden

.m-frame
  float right
  width s('calc(100% - %s)', $drawer_width)
  @media (min-width $app_mobile_width_min)
    transition all 0.6s

.m-aside
  width $aside_width
  white-space nowrap
  text-overflow ellipsis
  overflow-x hidden
  // background mediumspringgreen
  @media (min-width $app_mobile_width_min)
    transition all 0.6s
    &.sticky-bottom
      position fixed
      right s('calc(50% - %s)', $app_width * 0.5)
      bottom 0
    &.sticky-top
      position fixed
      right s('calc(50% - %s)', $app_width * 0.5)
      top s('calc(3em + %s)', $progress_height)
  @media (min-width $app_mobile_width_min)
    position fixed
    bottom 0
    right s('calc(50% - %s + 3em)', $app_width * 0.5)
    height s('calc(100vh - 3em - %s)', $progress_height)
    overflow hidden
  // $app_width_special = $app_width + $font_size * 1.5 // 3em / 2
  @media (min-width $app_mobile_width_min) and (max-width $app_width)
    right 3em // (max-width $app_width_special)

.m-main
  float left
  min-width $main_min_width
  width s('calc(100% - %s)', $aside_width)
  @media (min-width $app_mobile_width_min)
    transition all 0.6s

.m-footer
  clear both
  width 100%
  @media (min-width $app_mobile_width_min)
    transition all 0.6s

.m-heaper
  width 100%
  height 3em
  line-height 3
  background var(--color-background)
  overflow hidden
  @media (min-width $app_mobile_width_min)
    margin $gap * 4 0
    border-radius $gap * 0.5
    border 1px solid var(--color-clear)

.m-content
  width 100%
  @media (min-width $app_mobile_width_min)
    margin $gap * 4 0

#live2d-widget
  transition opacity 0.6s
  z-index zIndex(3) !important

.m-aside-clustrmaps
  user-select none
  width $aside_width - $gap * 8
  margin $gap * 4
  padding $gap * 0.5
  border-radius $gap * 0.5
  border 1px solid var(--color-clear)
  background var(--color-background)
  overflow hidden
  @media (max-width $app_mobile_width)
    width 100%
    margin 0
    border-radius 0

.social-share
  .social-share-icon
    background white

:root.closeDrawer
  .m-drawer
    width 0
    @media (max-width $app_mobile_width)
      height 0
  .m-frame
    width 100%
  @media (min-width $app_mobile_width_min)
    .m-main, .m-footer
      padding-left $gap * 2
    .m-footer
      width s('calc(100% - %s)', $aside_width)
      margin 0 $aside_width 0 0

:root.closeAside
  @media (min-width $app_mobile_width_min)
    .m-aside
      width 0
    .m-main
      width 100%
      padding-right $gap * 2
    .m-footer
      width s('calc(100% - %s)', $drawer_width)
      margin 0 0 0 $drawer_width
      padding-right $gap * 2
    &.closeDrawer
      .m-footer
        width 100%
        margin 0

:root.transfigure
  #live2d-widget
    opacity 0.5 !important

:root.lyride
  .aplayer-lrc
    opacity 0 !important

@media (max-width $app_width)
  .m-aside.sticky-bottom, .m-aside.sticky-top
    right 0

@media (max-width $app_mobile_width)
  .m-app
    overflow-x hidden
  .m-drawer, .m-frame, .m-aside, .m-main
    width 100%
  :root.closeDrawer, :root.closeAside, :root.closeDrawer.closeAside
    .m-main
      width 100%
  .m-drawer.sticky, .m-aside.sticky-bottom, .m-aside.sticky-top
    position initial
    top auto
    bottom auto
    right auto
  .m-heaper
    display none
  #live2d-widget
    opacity 0 !important

[data-lang] span
  @keyframes appear
    from
      opacity 0
    to
      opacity 1
  animation appear 0.6s

.markdown-body
  color var(--color-text)
  counter-reset h1
  h1, h2, h3, h4, h5, h6
    padding-top 0.5em
  code
    font-weight bold
  .highlight
    a
      display inline-block
      color #03a9f4
      &:after
        content ''
        display block
        width 0
        height 1px
        margin-top -1px
        background #03a9f4
        transition width 0.6s
      @media (min-width $app_mobile_width_min)
        &:hover
          text-decoration none
          &:after
            width 100%
    figcaption
      line-height 1.5
  img
    display block
    border-radius $gap * 0.5
    + em
      font-size 0.5em
      border-radius 1em
      padding 0.25em 0.75em
      border 1px solid
      margin 0.5em 0
      display inline-block
      @media (min-width $app_mobile_width_min)
        opacity 0.25
        &:hover
          opacity 1
          color #03a9f4
    @media (min-width $app_mobile_width_min)
      &:hover
        + em
          opacity 1
          color #03a9f4
  table
    word-break keep-all

:root.colorful
  .m-evanyou-canvas
    display none
  &:not(.night)
    body:before
      content '图片 Picture API: ' + $picurl
      position fixed
      top 0
      z-index -1
      color white
      writing-mode vertical-lr
      font-size 8px
      line-height 1.5
      height 100%
      text-align center

:root.night
  #live2d-widget, img
    filter brightness(0.8)
  .m-evanyou-canvas
    display initial
  .markdown-body
    a
      color #33ccff
    table
      tr
        background-color var(--color-background)
        &:nth-child(2n)
          background-color var(--color-clear)
    .highlight table tr
      background none

:root:not(.gray)
  .m-heaper, .p-brand, .p-menus, .p-skin, .p-settings, .p-panels, .p-audioplayer, .p-toc, .p-hitokoto, .p-recentposts, .p-timeline, .p-post, .p-page, .p-record, .p-gallery-item, .p-comment, .p-footer, .p-translater-bar, .p-search-dialog-bar, .p-search-dialog-result, .p-codelib, .p-empty, .p-iconlib, .m-aside-clustrmaps
    border-width 0

:root.gray:not(.night)
  .m-evanyou-canvas
    display none
  @media (min-width $app_mobile_width_min)
    .m-header
      box-shadow 0 0 4px 2px var(--color-shadow)
    .p-translater-result
      box-shadow 0 2px 1px 1px var(--color-shadow)
    .m-heaper, .p-brand, .p-menus, .p-skin, .p-settings, .p-panels, .p-audioplayer, .p-toc, .p-hitokoto, .p-recentposts, .p-timeline, .p-post, .p-page, .p-record, .p-gallery-item, .p-comment, .p-footer, .p-translater-bar, .p-search-dialog-bar, .p-search-dialog-result, .p-codelib, .p-empty, .p-iconlib, .m-aside-clustrmaps
      box-shadow 0 1px 2px 1px var(--color-shadow)
    .m-heaper, .p-brand, .p-menus, .p-skin, .p-settings, .p-panels, .p-audioplayer, .p-toc, .p-hitokoto, .p-recentposts, .p-timeline, .p-post, .p-page, .p-record, .p-gallery-item, .p-comment, .p-footer, .p-search-dialog-bar, .p-search-dialog-result, .p-codelib, .p-empty, .p-iconlib, .m-aside-clustrmaps
      border-width 2px
      border-color #cccccc
  .p-adframe-qrcode, .p-goingto-top, .p-goingto-bottom, .p-xcanvas
    box-shadow 0 0 4px 2px var(--color-shadow)
    &:hover
      box-shadow 0 0 4px var(--color-shadow)
    &:active
      box-shadow inset 0 0 4px var(--color-shadow)
  .p-adframe-content
    box-shadow 0 0 4px 2px var(--color-shadow)
  .p-extension
    .p-extension-button, .p-extension-frame
      box-shadow 0 0 4px 2px var(--color-shadow)
    &:hover
      .p-extension-button, .p-extension-frame
        box-shadow none

/*
@media (max-width $float_button_min_app_width)
  .p-adframe-qrcode, .p-goingto-top, .p-goingto-bottom, .p-xcanvas
    box-shadow 0 0 4px 1px
*/
:root.readmode
  body
    position fixed
    width 100%
  .p-post-main
    position fixed
    background var(--color-background)
    top 0
    left 0
    z-index 999999999
    height 100vh
    overflow-x hidden
    overflow-y scroll

@media (max-width $app_mobile_width)
  :root:not(.closeDrawer)
    .m-app
      .m-closeDrawer
        position fixed
        top 0
        left 0
        width 100%
        height 100vh
        background #00000099
        z-index 999999996
      .m-drawer
        position fixed
        background var(--color-background)
        z-index 999999996
        top 0
        left 0
        height 100vh
        overflow-x hidden
        overflow-y scroll
        width s('calc(%s - 3em)', $drawer_width)
        .p-brand-avatar
          width 4em
          position absolute
          top 0
          left 0
        .p-brand-detail
          padding-left 5em
        .p-brand-name
          margin-left -5em
          padding-left 6em
          text-align left
          line-height 2.3
        .p-brand-slogan
          text-align left
          padding-left 1.75em
          font-size 0.7em
          line-height 3.35